<template>
  <el-form ref="form" label-position="right" :model="currentRow"  label-suffix="："
           label-width="120px">
    <div class="geology">
      监测方案
    </div>
    <el-form-item label="简易监测">
      <el-checkbox-group v-model="currentRow.easyMonitorPlanList" @change="ChangeOtherEasyMonitor">
        <el-checkbox v-for="item in EnumEasyPlanList" :key="item.code" :label="item.code">{{item.name}}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="描述" v-if="otherEasy || currentRow.easyMonitorPlanRemark">
      <el-input v-model="currentRow.easyMonitorPlanRemark"
                placeholder="请描述其他 简易监测"></el-input>
    </el-form-item>
    <el-form-item label="专业监测">
      <el-checkbox-group v-model="currentRow.specialMonitorPlanList" @change="ChangeOtherSpecialMonitor">
        <el-checkbox v-for="item in EnumSpecialPlanList" :key="item.code" :label="item.code">{{item.name}}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="描述" v-if="otherSpecial || currentRow.specialMonitorPlanRemark">
      <el-input v-model="currentRow.specialMonitorPlanRemark"
                placeholder="请描述其他 专业监测"></el-input>
    </el-form-item>
    <div class="geology">
      pdf监测方案
    </div>
    <div v-if="isLook">
      <div v-for="(item,index) in monitorPlanFile" :key="index" style="text-align: center;display: inline-block;margin-left: 20px;font-size: 20px">
        <a :download="item.name" :href="item.url" style="color:black">
          <i class="iconfont iconPDF" style="font-size: 70px;color:red"></i>
          <br/>
          {{item.name}}
        </a>
      </div>
    </div>
    <upload-file v-model="currentRow.monitorPlanFileList" ref="uploadClear" v-else></upload-file>
  </el-form>
</template>
<script>

import ItemMixins from "./item.mixins";
import UploadFile from '@/components/upload-file'
import Enums from '@/utils/enums'

export default {
  props: ['value','isLook'],
  mixins: [ItemMixins,Enums],
  components: {UploadFile},
  data() {
    return {
      EnumEasyPlanList: [],
      EnumSpecialPlanList: [],
      // 获取验证码文案
      verificationCodeText: '获取验证码'
    }
  },
  computed: {
    monitorPlanFile(){
      return this.filePathHandle(this.currentRow.monitorPlanFileList)
    },
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {  //选择路线
    // 内部表单校验
    _validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {    //如果是查看详情，把文件地址处理
    if(this.isLook){
      this.filePathHandle(this.currentRow.designFileList)
    }
    this.queryDictList(['EnumEasyPlan','EnumSpecialPlan'],
      ['EnumEasyPlanList','EnumSpecialPlanList'])
  }
}
</script>

<style lang="less">
  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;

  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .m-t-24 {
    .el-form-item__content {
      margin-left: 0px !important;
    }

    .el-button--text {
      color: red;
    }

    .el-form-item {
      margin-bottom: 0px;
    }
  }

  .add-tab {
    margin-left: 20px;

    .el-table .cell {
      padding: 0 10px !important;
      line-height: 13px !important;
    }

    .el-table td, .el-table th {
      padding: 5px 0;
      font-size: 13px;
    }

    .el-button {
      padding-right: 10px;
    }

  }


</style>
